<template>
	<view>
		<!-- 搜索框 -->
		<my-search></my-search>
		
		<view class="scroll-view-container">
			<!-- 左侧的滚动视图区域 -->
			<scroll-view class="scrollView_left" scroll-y :style="{height: wh + 'px'}">
				<view :class="['scrollView_left_item', i === cate_active ? 'active' : '']" v-for="(item, i) in cateList" :key="i" @click="change_cateActive(i)">{{item.cat_name}}</view>
			</scroll-view>
			<!-- 右侧的滚动视图区域 -->
			<scroll-view class="scrollView_right" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">
				<view class="scrollView_right_item" v-for="(item, i) in cateList2" :key="i">
					<view class="scrollView_right_item_title">- - {{item.cat_name}} - -</view>
					<view class="scrollView_right_item_con">
						<navigator class="con_item" url="" v-for="(item3, i3) in item.children" :key="i3" v-if="item.children" @click="gotoGoodsList(item3)">
							<image :src="item3.cat_icon" mode=""></image>
							<view>{{item3.cat_name}}</view>
						</navigator>
						<view v-if="!item.children" class="com_item_null">
							无
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMix from '@/mixins/tabbar-badge.js'
	
	export default {
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],
		// 数据：
		data() {
			return {
				wh: 0,		// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
				cate_active: 0,	// 分类数据当前项
				cateList: [],		// 分类数据列表（一级列表）
				cateList2: [],		// 分类数据列表的子列表（二级列表）
				scrollTop: 0
			};
		},
		onLoad() {
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			// 为 wh 窗口可用高度动态赋值
			this.wh = sysInfo.windowHeight - 50
			
			this.getCateList()	// 调用: 获取分类列表
		},
		methods: {
			// 获取分类列表
			async getCateList() {
				let { data } = await uni.$http.get('/api/public/v1/categories')
				if (data.meta.status !== 200) uni.$showMsg()
				// 一级列表
				this.cateList = [...data.message]
				// 二级列表
				this.cateList2 = this.cateList[this.cate_active].children
				// 三级列表
				// this.cateList3 = this.cateList2.map(item => {
				// 	return item.children
				// })
				// console.log(data)
			},
			// 改变cate_active
			change_cateActive(i) {
				this.cate_active = i
				this.getCateList()	//改变了左侧分类选项, 重新获取一次分类
				this.scrollTop = this.scrollTop ? 0 : 1
			},
			// 跳转至商品列表
			gotoGoodsList(item) {
				console.log(item)
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?cid=' + item.cat_id
				})
			}
		},
	}
</script>

<!-- 样式 -->
<style lang="scss">
	.scroll-view-container {
		display: flex;
		// 左侧
		.scrollView_left {
			width: 120px;
			.scrollView_left_item {
				line-height: 60px;
				background-color: #f7f7f7;
				text-align: center;
				font-size: 12px;
				
				// 激活项的样式
				&.active {
				  background-color: #ffffff;
				  position: relative;
				
				  // 渲染激活项左侧的红色指示边线
				  &::before {
				    content: ' ';
				    display: block;
				    width: 3px;
				    height: 30px;
				    background-color: #c00000;
				    position: absolute;
				    left: 0;
				    top: 50%;
				    transform: translateY(-50%);
				  }
				}
			}
		}
		// 右侧
		.scrollView_right {
			padding-top: 10px;
		}
		.scrollView_right_item_title {
			color: orange;
			text-align: center;
			padding: 5rpx 0;
		}
		.scrollView_right_item_con {
			display: flex;
			flex-wrap: wrap;
			.con_item {
				width: 33.3%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 5px 0 30px;
				image {
					width: 60px;
					height: 60px;
				}
				view {
					font-size: 12px;
				}
			}
			.com_item_null {
				width: 100%;
				padding: 30px;
				text-align: center;
				font-size: 14px;
				color: #777;
			}
		}
	}

</style>
